<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册</title>
		<style type="text/css">
			.box {
				/* top: 58px; */
				width: 450px;
				height: 550px;
				/* margin-top: 3%; */
				margin-left: 10%;
				margin-bottom: 3%;
				margin-right: 0;
				font-size: 14px;
				background-color: #FFFFFF;
				opacity: 0.7;
				border: solid 1px #FFFFFF;
				position: relative;
			}

			.di {
				background: #fff;
				margin-top: 0;
				margin-bottom: 2%;
				padding-top: 100px;
				position: absolute;
				width: 100%
			}

			.title {
				position: relative;
				padding-top: 20px;
				padding-right: 0px;
				/* padding-bottom: 24px; */
				padding-left: 0px;
				text-align: center;
				font-size: 24px;
				color: #666;
			}

			.u-input {
				position: relative;
				width: 410px;
				height: 270px;
				font-size: 30px;
			}

			.u-input-btn {
				background-color: #ff6700;
				width: 380px;
				height: 50px;
				line-height: 20px;
				display: block;
				margin-bottom: 14px;
				text-align: center;
				font-size: 18px;
				color: #fff;
				/* 鼠标指针变手 */
				cursor: pointer;
				margin-left: 7%;
				/* margin-top: 10%; */
				border-color: #FF6700;
				position: relative;
			}

			.u-input input {
				position: relative;
				margin-left: 7%;
				width: 350px;
				line-height: 22px;
				padding-top: 15px;
				padding-right: 16px;
				padding-bottom: 15px;
				padding-left: 16px;
				display: block;
				font-size: 15px;
			}

			.language {
				text-align: center;
				display: inline-block;
				display: block;
				margin-left: 4%;
			}

			.language a {
				color: #757575;
				padding-top: 0px;
				padding-right: 10px;
				padding-bottom: 10px;
				padding-left: 10px;
			}

			body {
				margin: 0;
				background-image: url(img/denglubg.jpg);
				background-repeat: no-repeat;
				background-position: cover;
				height: 1000px;
				opacity: 0.7;
			}

			.head {
				width: 1130px;
				margin: 0 auto;
			}

			.head-logo a {
				display: block;
				margin-left: 10%;
				position: relative;
			}

			.foot {
				padding-top: 10px;
				padding-right: 10px;
				padding-bottom: 10px;
				padding-left: 10px;
			}

			.foot a {
				color: #757575;
				text-align: center;
				display: inline-block;
				display: block;
				margin-left: 4%;
			}
		</style>

		<script type="text/javascript">
			/* 登录跳转判断 */
			function checkzhuce() {
				var username=document.getElementById("username").value;
				var pwd = document.getElementById("pwd").value;
				var repwd = document.getElementById("repwd").value;
				/* 判断用户名是否为空 */
				if(username==""){
					document.getElementById("errors").innerHTML="用户名不能为空";
					return;
				}else{
					document.getElementById("errors").innerHTML="";
				}
				/* 密码格式校验 */
				if(pwd == ""){
					document.getElementById("errors").innerHTML ="密码不能为空";
					return;
				}else{
					document.getElementById("errors").innerHTML ="";
					var reg = /^[0-9]{6,12}$/;
					if(!reg.test(pwd)){
						document.getElementById("errors").innerHTML ="密码只能为6-12位数字";
						return;
					}
				}
				/* 密码验证 */
				if(pwd != repwd){
					document.getElementById("errors").innerHTML ="两次密码不一样";
					return;
				}else{
					window.location.href="login.htmll";
				}
			}

			/* 登录跳转 */
			function Login() {
				window.location.href = "login.html";
			}
		</script>
	</head>
	<body>
		<!-- 导航 -->
		<div class="heade">
			<div class="head-logo">
				<a href="index.html"><img src="img/head-logo.png" /></a>
			</div>
		</div>

		<!-- 登录 -->
		<div class="box">
			<div class="title">
				账号注册
			</div>

			<!-- 输入框 -->
			<div class="u-input">
				<!-- 账号 -->
				<p>
					<input type="text" id="username" placeholder="请输入您的ID">
				</p>
				<!-- 密码 -->
				<p>
					<input type="password" id="pwd" placeholder="请输入您的密码">
				</p>
				<!-- 验证密码 -->
				<p>
					<input type="password" id="repwd" placeholder="请再次输入您的密码">
					<!-- 错误提示信息 -->
					<span id="errors" style="color: #FF6700;font-size: 14px;margin-left: 7%;"></span>
				</p>

			</div>

			<!-- 注册按钮 -->
			<p>
				<input type="submit" name="Submit" value="注册" onclick="checkzhuce()" class="u-input-btn" />
			</p>
			<!-- 登录按钮 -->
			<p>
				<input type="submit" name="Submit" value="已有帐号直接登录" onclick="Login()" class="u-input-btn" />
			</p>
		</div>

		<!-- 底部信息 -->
		<div class="di">
			<div class="language">
				<a>简体</a>
				<a>|</a>
				<a>繁体</a>
				<a>|</a>
				<a>English</a>
				<a>|</a>
				<a>常见问题</a>
				<a>|</a>
				<a>隐私政策</a>
				<br />
				<br />
			</div>
			<div class="foot">
				<a>小米公司版权所有-京ICP备10046444-<img src="img/jinghui.png">京公网安备11010802020134号-京ICP证110507号</a>
			</div>
		</div>
	</body>
</html>
